<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="sepBread">
      <el-breadcrumb-item :to="{ path: '/OrderManagement' }">订单管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割符号 -->
    <el-divider></el-divider>

    <!-- 表单 -->

    <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" 
      class="demo-ruleForm">
      <el-row>
        <el-col :span="5">
          <el-form-item label="订单编号" prop="orderID" :rules="[{ required: true, message: '订单编号不能为空' }]">
            <el-input type="orderID" disabled="disabled" v-model.number="numberValidateForm.orderID" autocomplete="off">
            </el-input>
          </el-form-item>
          <el-form-item label="订单类型:" :required="true">
            <el-form-item prop="OrderType" :rules="[{ required: true, message: '订单类型不能为空' }]" class="inline">
              <el-select v-model="numberValidateForm.OrderType" placeholder="选择类型" disabled="disabled">
                <el-option label="验车订单" value="验车订单"></el-option>
                <el-option label="领标订单" value="领标订单"></el-option>
                <el-option label="异地委托函" value="异地委托函"></el-option>
                <el-option label="新车上牌" value="新车上牌"></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>

          <el-form-item label="接车地址：" prop="address" :rules="[{ required: true, message: '接车地址不能为空' }]">
            <el-input type="address" v-model.number="numberValidateForm.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车牌号：" prop="carNum" :rules="[
            { required: true, message: '车牌号不能为空' },
            {
              pattern:
                /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})$/,
              message: '请输入正确的车牌号',
            },
          ]">
            <el-input type="carNum" v-model.number="numberValidateForm.carNum" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="城市:" :required="true">

            <el-form-item prop="cityId" :rules="[{ required: true, message: '城市选择不能为空' }]" class="inline">
              <el-select v-model="numberValidateForm.cityId" placeholder="接车城市：">
                <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>

          <el-form-item label="接车司机:" :required="true">
            <el-form-item prop="region" :rules="[{ required: true, message: '区域不能为空' }]">
              <el-select type="string" v-model="numberValidateForm.region" placeholder="选择区域"
                @change="changeAreaValue($event)">
                <el-option label="锦江区" value="锦江区"></el-option>
                <el-option label="青羊区" value="青羊区"></el-option>
                <el-option label="金牛区" value="金牛区"></el-option>
                <el-option label="武侯区" value="武侯区"></el-option>
                <el-option label="成华区" value="成华区"></el-option>
                <el-option label="龙泉驿区" value="龙泉驿区"></el-option>
                <el-option label="青白江区" value="青白江区"></el-option>
                <el-option label="温江区" value="温江区"></el-option>
                <el-option label="双流区" value="双流区"></el-option>
                <el-option label="郫都区" value="郫都区"></el-option>
                <el-option label="新津区" value="新津区"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="person" :rules="[{ required: true, message: '接车司机不能为空' }]" class="inline">
              <el-select v-model="numberValidateForm.person" placeholder="接车司机：">
                <el-option v-for="item in person" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>

          <el-form-item label="客户备注" prop="text">
            <el-input type="textarea" v-model.number="numberValidateForm.text" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="订单状态:" :required="true">
            <el-form-item prop="orderStatus" :rules="[{ required: true, message: '订单状态不能为空' }]">
              <el-select v-model="numberValidateForm.orderStatus" placeholder="请选择订单状态">
                <el-option label="待处理" value="待处理"></el-option>
                <el-option label="已处理" value="已处理"></el-option>
                <el-option label="订单关闭" value="订单关闭"></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="用户姓名" prop="userNames">
            <el-select v-model="numberValidateForm.userNames" placeholder="请选择用户姓名" disabled="disabled"
              @change="changeUsername">
              <el-option v-for="item in userNames" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单来源" prop="orderOrigin" :rules="[{ required: true, message: '订单来源不能为空' }]">
            <el-select type="string" v-model="numberValidateForm.orderOrigin" placeholder="选择订单来源">
              <el-option label="后台" value="后台"></el-option>
              <el-option label="第三方" value="第三方"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="接车时间" prop="endDate">
            <el-date-picker v-model="sizeForm.endDate" :clearable="false" type="datetime"
              :rules="[{ required: true, message: '接车时间不能为空' }]" @change="changeEndTime"
              value-format="yyyy-MM-ddTHH:mm:ssZ" style="width: 100%" placeholder="接车时间" align="right">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="用户电话" prop="contactTel" :rules="[
            { required: true, message: '联系电话不能为空' },
            {
              pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
              message: '请输入正确的手机号',
            },
          ]">
            <el-input type="contactTel" v-model.number="numberValidateForm.contactTel" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="4S店:" :rules="[{ required: true, message: '不能为空' }]">
            <el-form-item prop="region" :rules="[{ required: true, message: '区域不能为空' }]">
              <el-select type="string" v-model="numberValidateForm.region" placeholder="选择区域"
                @change="changeAreaValue($event)">
                <el-option label="锦江区" value="锦江区"></el-option>
                <el-option label="青羊区" value="青羊区"></el-option>
                <el-option label="金牛区" value="金牛区"></el-option>
                <el-option label="武侯区" value="武侯区"></el-option>
                <el-option label="成华区" value="成华区"></el-option>
                <el-option label="龙泉驿区" value="龙泉驿区"></el-option>
                <el-option label="青白江区" value="青白江区"></el-option>
                <el-option label="温江区" value="温江区"></el-option>
                <el-option label="双流区" value="双流区"></el-option>
                <el-option label="郫都区" value="郫都区"></el-option>
                <el-option label="新津区" value="新津区"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="Sperson" :rules="[{ required: true, message: '不能为空' }]">
              <el-select v-model="numberValidateForm.Sperson" placeholder="请选择4s店：">
                <el-option v-for="item in Store" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form-item>

          <el-form-item label="修理厂:" :rules="[{ required: true, message: '.不能为空' }]">
            <el-form-item prop="region" :rules="[{ required: true, message: '区域不能为空' }]">
              <el-select type="string" v-model="numberValidateForm.region" placeholder="选择区域"
                @change="changeAreaValue($event)">
                <el-option label="锦江区" value="锦江区"></el-option>
                <el-option label="青羊区" value="青羊区"></el-option>
                <el-option label="金牛区" value="金牛区"></el-option>
                <el-option label="武侯区" value="武侯区"></el-option>
                <el-option label="成华区" value="成华区"></el-option>
                <el-option label="龙泉驿区" value="龙泉驿区"></el-option>
                <el-option label="青白江区" value="青白江区"></el-option>
                <el-option label="温江区" value="温江区"></el-option>
                <el-option label="双流区" value="双流区"></el-option>
                <el-option label="郫都区" value="郫都区"></el-option>
                <el-option label="新津区" value="新津区"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="Resite" :rules="[{ required: true, message: '不能为空' }]">
              <el-select v-model="numberValidateForm.Resite" placeholder="请选择检测场：">
                <el-option label="打元宝" value="1"></el-option>
                <el-option label="大苏打" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// 时间的校验
const validateStartTime = (rule, value, callback) => {
  if (value === undefined) {
    callback(new Error("开始时间不能为空"));
  } else {
    if (new Date(this.addForm.startTime).getTime() <= new Date().getTime()) {
      callback();
    } else {
      callback();
    }
  }
};

export default {
  data() {
    return {
      //   pickerOptionsStart: {
      //     // 时间不能大于当前时间
      //     disabledDate: (time) => {
      //       return time.getTime() > Date.now();
      //     },
      //   },
      id: "", //接收传来的id参数

      sizeForm: {
        startTime: null,
        endTime: null,
      },
      // 开始和结束日期转换的时间戳
      startTime: null,
      endTime: null,
      numberValidateForm: {
        Sperson: "",
        orderOrigin: "",
        Resite: "",
        provinceId: "",
        paystate: "",
        orderStatus: "",
        address: "",
        contactTel: "",
        orderID: "",
        OrderType: "",
        payStatus: "",
        orderTime: "",
        region: "",
        person: "",
        cityId: "",
        accpany: "",
        orderstate: "",
        artime: "",
        carNum: "",
        text: "",
      },
      map: {},
      userNames: [],
      provinceList: [],
      cityList: [],
      person: [],
      Store: [], //4s店铺
      repaireFactory: [], //修理厂
      rules: {},
      validateStartTime: validateStartTime,
      userName: "",
    };
  },
  created() {
    //渲染用户信息
    this.id = this.$route.query.id;
    console.log(this.id);
    this.$axios({
      url: `order/findById?id=${this.id}`,
      method: "get",
    })
      .then((res) => {
        if (res.data.code == 0) {
          console.log(res);
          // console.log(res.data.driverId);
          // console.log(res.data.orderNum);


          //日期
          var today = new Date(res.data.data.orderTime);
          var DD = String(today.getDate()).padStart(2, '0'); // 获取日
          var MM = String(today.getMonth() + 1).padStart(2, '0'); //获取月份，1 月为 0
          var yyyy = today.getFullYear(); // 获取年

          // 时间
          let hh = String(today.getHours()).padStart(2, '0');       //获取当前小时数(0-23)
          let mm = String(today.getMinutes()).padStart(2, '0');     //获取当前分钟数(0-59)
          let ss = String(today.getSeconds()).padStart(2, '0');     //获取当前秒数(0-59)
          today = yyyy + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss;
          console.log(today)
          this.numberValidateForm.orderID = res.data.data.orderNum;
          this.numberValidateForm.OrderType = res.data.data.orderType;
          this.numberValidateForm.orderStatus = res.data.data.orderStatus;
          this.numberValidateForm.orderOrigin = res.data.data.orderOrigin;
          this.sizeForm.endDate = today
          this.$axios({
            url: `carOwner/find?id=${res.data.data.carownerId}`,
            method: "get",
          })
            .then((resp) => {
              if (resp.data.code == 0) {
                console.log(resp);
                this.numberValidateForm.userNames = resp.data.data.name;
                this.numberValidateForm.contactTel = resp.data.data.phoneNum;
                this.numberValidateForm.carNum = resp.data.data.carNum;
              }
            })
            .catch((error) => {
              console.log(error);
            }),

            this.$axios({
              url: `province/findCityByCityId?cityId=${res.data.data.cityId}`,

              method: "get",
            })
              .then((cityres) => {
                if (cityres.data.code === 0) {
                  // console.log("4s" + resrepair);
                  this.numberValidateForm.cityId = cityres.data.data.city;
                  //  this.numberValidateForm.region = resrepair.data.area;
                  //  this.numberValidateForm.Sperson = resrepair.data.name;
                }
              })
              .catch((errcity) => {
                // address Sperson
                console.log(errcity);
              });




          this.$axios({
            url: `repairFactory/find?id=${res.data.data.repairFactoryId}`,
            method: "get",
          })
            .then((resrepair) => {
              if (resrepair.data.code === 0) {
                // console.log("4s" + resrepair);
                this.numberValidateForm.Resite = resrepair.data.data.shortName;
                this.numberValidateForm.region = resrepair.data.data.area;
                //  this.numberValidateForm.Sperson = resrepair.data.name;
              }
            })
            .catch((err4s) => {
              // address Sperson
              console.log(err4s);
            });


          this.$axios({
            url: `S4Manage/findById?id=${res.data.data.carmanageId}`,
            method: "get",
          })
            .then((resrepair) => {
              if (resrepair.data.code === 0) {
                // console.log("4s" + resrepair);
                this.numberValidateForm.address = resrepair.data.data.location;
                this.numberValidateForm.Sperson = resrepair.data.data.name;
              }
            })
            .catch((err) => {
              // address Sperson
              console.log(err);
            });


          this.$axios({
            url: `driver/findById?id=${res.data.data.driverId}`,
            method: "get",
          })
            .then((resrepair) => {
              if (resrepair.data.code === 0) {

                this.numberValidateForm.person
                  = resrepair.data.data.name;
              }
            })
            .catch((err) => {
              // address Sperson
              console.log(err);
            });
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  mounted: function () {
    // console.log(1);
    this.$axios({
      url: "/province/findAll",
      method: "get",
    })
      .then((res) => {
        console.log("发送请求" + res);
        if (res.data.code === 0) {
          console.log("请求成功");
          res.data.data.forEach((item) => {
            this.provinceList.push({
              label: item["province"],
              value: item["id"],
            });
          });
        }
      })
      .catch((err) => {
        console.log("请求错误" + err);
      });

    //请求用户姓名
    this.$axios({
      url: "carOwner/list",
      method: "post",
      data: {
        limit: 100,
        page: 0,
      },
    })
      .then((res) => {
        if (res.data.code === 0) {
          // console.log("请求司机成功"+res.data);
          res.data.data.forEach((item) => {
            this.userNames.push({ label: item.name, value: item.id });
            this.map[item.id] = item;
          });
        }
      })
      .catch((err) => {
        console.log("请求失败" + err);
      });
  },
  methods: {
    changeUsername(itemId) {
      console.log(itemId);
      let item = this.map[itemId];
      this.userName = item.name;
      this.numberValidateForm.carNum = item.carNum;
      this.numberValidateForm.contactTel = item.phoneNum;
    },
    changeStartTime(val) {
      console.log(val);
      let date = new Date(val).getTime();
      this.startTime = date;
      if (this.endTime) {
        if (this.endTime < this.startTime) {
          this.$message.success("开始时间不能大于结束时间");
          this.sizeForm.startDate = "";
          this.startTime = null;
        }
      }
    },
    changeEndTime(val) {
      console.log(val);
      console.log(this.sizeForm.endDate);
      let date = new Date(val).getTime();
      this.endTime = date;
      if (this.startTime) {
        if (this.endTime < this.startTime) {
          this.$message.success("结束时间不能小开始时间");
          this.sizeForm.endDate = "";
          this.endTime = null;
        }
      }
    },

    changeAreaValue(itemID) {
      // console.log(itemID);
      //查找司机
      this.$axios({
        url: `driver/findByArea?area=${itemID}`,
      })
        .then((res) => {
          if (res.data.code == 0) {
            (this.person = []),
              res.data.data.forEach((item) => {
                this.person.push({ label: item.name, value: item.id });
              });
          }
        })
        .catch((err) => {
          console.log("请求错误" + err);
        });
      //查找4s店铺
      this.$axios({
        url: `S4Manage/findBySignWhere?area=${itemID}`,
      })
        .then((res) => {
          if (res.data.code == 0) {
            (this.Store = []),
              res.data.data.forEach((item) => {
                this.Store.push({ label: item.name, value: item.id });
              });
          }
        })
        .catch((err) => {
          console.log("请求错误" + err);
        });

      //查找修理厂
      //       this.$axios({
      //     url: `S4Manage/findBySignWhere?area=${itemID}`
      //   }).then((res) => {
      //     if (res.code == 0) {
      //       this.Store = [],
      //         res.data.forEach((item) => {
      //           this.Store.push({ label: item.name, value: item.id })
      //         })

      //     }
      //   }).catch((err) => {
      //     console.log("请求错误" + err);
      //   })
    },
    changeProvinceValue(itemid) {
      // console.log(itemid);
      this.$axios({
        url: `province/findCityByProvinceId?provinceId=${itemid}`,
      })
        .then((res) => {
          if (res.data.code == 0) {
            (this.cityList = []),
              res.data.data.forEach((item) => {
                this.cityList.push({ label: item.city, value: item.id });
              });
          }
        })
        .catch((err) => {
          console.log("请求错误" + err);
        });
    },
    submitForm(formName) {
      console.log(1);

      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            carNum: this.numberValidateForm.carNum,
            carmanageId: this.numberValidateForm.Sperson,
            carownerName: this.userName,
            carownerPhone: this.numberValidateForm.contactTel,
            cityId: this.numberValidateForm.cityId,
            description: this.numberValidateForm.text,
            driverId: this.numberValidateForm.person,
            orderOrigin: this.numberValidateForm.orderOrigin,
            orderType: this.numberValidateForm.OrderType,
            pickUpAddress: this.numberValidateForm.address,
            pickUpTime: this.sizeForm.endDate,
            repairFactoryId: this.numberValidateForm.Resite,
          };

          //验证通过,发送http请求,创建订单
          this.$axios({
            url: "/order/add",
            method: "post",
            data: data,
          })
            .then((res) => {
              console.log("发送请求" + res);
              if (res.data.code === 0) {
                alert("添加成功");
                this.tableData = res.data;
                this.count = res.count;
              }
            })
            .catch((err) => {
              console.log("请求错误" + err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.sepBread {
  font-size: 20px;
}

.driver {
  display: inline-block !important;
}

.el-form-item__content {
  display: flex;
}

.el-form-item .el-select {
  width: 100%;
}
</style>